<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        header{
            width: 100%;
        }
        header h2{
            height: 50px;
            margin: 30px auto;
            margin-left: 30px;

        }
        header .top_box{

            text-align: center;
            height: 50px ;
            line-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;

        }
        header .top_box input{
            height: 40px;
            line-height: 40px;
            border-radius: 25px;
            outline: none;
            padding-left: 20px;
            box-sizing: border-box;
            width: 380px;
            border: transparent;
            background-color: gainsboro;
            font-size: 18px;
            color: rgb(150, 153, 145);
        }
        header .top_box  span{
            font-size: 25px;
            color: skyblue;
        }
        header .center_box{
            margin-top: 30px;
            min-height: 100px;
        }
        header .center_box h3{
            font-size: 20px;
        }
        .iconfont{
            font-size: 20px;
        }
        header .center_box .center_top{
            height:50px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 30px;
        }
        header .center_box .center_bottom, header .bottom_box .bottom_bottom{
            box-sizing: border-box;
            padding: 0 30px;
            display: flex;
            justify-content:flex-start;
            flex-wrap: wrap;
            width: 98%;
        }
        header .center_box .center_bottom .spans,header .bottom_box .bottom_bottom span{
            display: inline-block;
            min-width:40px;
            text-align: center;
            box-sizing: border-box;
            padding:  5px 10px;
            margin: 5px;
            background-color: gainsboro;
        }
        header .bottom_box{
            margin-top: 30px;
            min-height: 100px;
        }
        header .bottom_box h3{
            font-size: 20px;
            margin: 10px 30px;
        }
    </style>
</head>
<body>
    <header id="app">
        <h2><搜索</h2>
        <main>
            <div class="top_box">
                <input type="text" placeholder="搜索商家，商品名称" v-model="inputText">
                <span @click="add">搜索</span>
            </div>
            <div class="center_box">
                <div class="center_top">
                    <h3>历史搜索</h3>
                    <p><span class="iconfont">&#xe627;</span></p>
                </div>
                <div class="center_bottom"  >
                    <div class="spans" v-for="(item,index) in tasklist" :key="index"
                    ><span>{{item.name}}</span></div>
                </div>
            </div>
            <div class="bottom_box">
                <h3>搜索发现</h3>
                <div class="bottom_bottom">
                    <span>麻辣烫</span>
                    <span>米线</span>
                    <span>披萨</span>
                    <span>蛋糕</span>
                    <span>汉堡</span>
                    <span>腊八粥</span>
                    <span>烤肉拌饭</span>
                    <span>炸鸡</span>
                    <span>唯多美</span>
                </div>
            </div>

            
        </main>
    </header>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            inputText:'',
            tasklist:[
                // {id:1,name:'猜猜',status:true}
            ]
        },
        methods:{
            add(){
                if(this.inputText){
                    var obj ={id:this.tasklist.length +1,name:this.inputText,status:false}
                    this.tasklist.push(obj);
                    this.inputText='';
                }
            },
            changeStatus(item){
                item.status = !item.status
            }
        }
    })
</script>